<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>购物车</title>
	<link href="${ pageContext.request.contextPath }/css/common.css" rel="stylesheet" type="text/css">
	<link href="${ pageContext.request.contextPath }/css/cart.css" rel="stylesheet" type="text/css">

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
	 	 function checkDel() {
			return window.confirm("您确定要删除吗?");
		}
	 	 function checkClear() {
			return window.confirm("确定要清空购物车吗?");
		}
	 	 function fanhui(pid){
	 		window.location.href = "${pageContext.request.contextPath}/productFindByPid.action?pid="+pid;
	 	 }
	 	//批量删除
	 	$(function(){
	 	    $("#deleteSkills").click(function(){
	 	        //判断是否至少选择一项
	 	        var checkedNum = $("input[name='ids']:checked").length;
	 	        if(checkedNum==0){
	 	            alert("请至少选择一项");
	 	            return;
	 	        }
	 	        if(confirm("确定要删除所选商品吗？")){
	 	            //这个数组存储要删除的数据的id
	 	            var checkedList = new Array();
	 	            //每一个被选中的name为ids的input标签
	 	            $("input[name='ids']:checked").each(function(){
	 	                checkedList.push($(this).val());//将id存入数组
	 	            });
	 	            $.ajax({
	 	                type:"post",
	 	                dataType:"json",
	 	                url:"${pageContext.request.contextPath}/deleteCarts.action",//不同页面只用更改action即可
	 	                async:true,
	 	                //数组的toString里的id是用","分隔开的，例如数组{"1","2","3"},同String后为"1,2,3"
	 	                data:{"deleteList":checkedList.toString()},
	 	                success:function(response){
	 	                    if(response.errorCode==="100"){
	 	                        for(var i=0;i<checkedList.length;i++){
	 	                            $("#tr_"+checkedList[i]).remove();//ajax动态移除
	 	                        }
	 	                        alert("删除成功");
	 	                    }else{
	 	                        alert("删除失败");
	 	                    }
	 	                },
	 	                error:function(){
	 	                    alert("error");
	 	                }
	 	             })
	 	         }
	 	     })
	 	              			
	 	})
	 	
	 	function add(id){
	 		
	 	            $.ajax({
	 	                type:"post",
	 	                dataType:"json",
	 	                url:"${pageContext.request.contextPath}/addCount.action",
	 	                async:true,
	 	                data:{
	 	                	"id":id
	 	                	},
	 	                success:function(response){
	 	                    if(response.errorCode==="100"){
	 	                    	console.log("添加成功");
	 	                    	var num=document.getElementById(id).value;
	 	   						document.getElementById(id).value=num-0+1;
	 	   						document.getElementById
	 	                    }else{
	 	                    	console.log("添加失败");
	 	                    }
	 	                },
	 	                error:function(){
	 	                    alert("error");
	 	                }
	 	             })
	 	            
	 	}
	 	
	 	function sub(id){
	 		
	            $.ajax({
	                type:"post",
	                dataType:"json",
	                url:"${pageContext.request.contextPath}/subCount.action",
	                async:true,
	                data:{
	                	"id":id
	                	},
	                success:function(response){
	                    if(response.errorCode==="100"){
	                        console.log("减少成功");
	                        var num=document.getElementById(id).value;
	        		 		if(num!=1)
	        		 			document.getElementById(id).value=num-0-1;
	                    }else{
	                    	console.log("减少失败");
	                    }
	                },
	                error:function(){
	                    alert("error");
	                }
	             })
	            
	}
    </script>

	</script>
</head>
<body>
	<div class="container header">
		<div class="span5">
			<div class="logo">
				<a href="${pageContext.request.contextPath}/index.action"> <img
					src="${pageContext.request.contextPath}/image/r___________renleipic_01/logo.gif"
					alt=""></a>
			</div>
		</div>
		<div class="span9">
			
		</div>
		<%@ include file="menu.jsp"%>
	</div>
	<div class="container cart">
	<c:choose>
		<c:when test="${cartlist.size()>=1}">
			<div class="span24">
				<div class="step step1"></div>
				<table>
					<tbody>
						<tr>
							<th>选择</th>
							<th>图片</th>
							<th>商品</th>
							<th>价格</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
						<c:forEach var="entry" items="${cartlist}">
							<tr  id="tr_${entry.id }">
							
								<td width="60">
								<input type="hidden" id="scid" name="scid" value="${entry.id }">
								<input type="hidden" id="pid" name="pid" value="${entry.pid }">
								<input name="ids" id="ids" value="${entry.id}" type="checkbox" /></td>
								<!-- 商品图片 -->
								<td width="60" onclick="fanhui(${entry.pid})">
								<input type="hidden" name="id" value="22">
										<img src="${ pageContext.request.contextPath }/${entry.pimage}"></td>
								<!-- 商品名称 -->
								<td><a target="_blank"> ${entry.pname}</a></td>
								<!-- 商品单价 -->
								<td>${entry.pprice }</td>
								<!-- 商品数量 -->
								<td class="quantity" width="100">
								
								<input id="${entry.id }" name="count" value="${entry.count }" maxlength="4"
							onpaste="return false;" type="text"/>
							<div>
							<!-- 设置数量的增加或减少 -->
								<button id="increase" class="increase" onclick="add(${entry.id })">&nbsp;</button> 
								<button id="decrease" class="decrease" onclick="sub(${entry.id })">&nbsp;</button>
							</div>
								
								
								</td>
								<!-- 小计 -->
								<td class="quantity" width="60">${entry.subtotle}</td>
								<td><a href="${ pageContext.request.contextPath }/delProFromCart.action?id=${entry.id}"
									class="delete" onclick="return checkDel();">删除</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<input id="deleteSkills" type="button" value="-批量删除-" 
			style="color:#fff;background-color: #d9534f;border-color: #d9534f;margin-left:870px;margin-bottom:10px;"/>
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>  商品金额: <strong
						id="effectivePrice">${totale}</strong>
				</div>
				<div class="bottom">
					<a href="${ pageContext.request.contextPath }/clearCart.action"
						id="clear" class="clear" onclick="return checkClear();">清空购物车</a>
					<a
						href="${ pageContext.request.contextPath }/toOrder.action"
						id="submit" class="submit">提交订单</a>
				</div>
			</div>
		</div>
		</c:when>
		<c:otherwise>
			<div class="span24">
				<div class="step step1">
					<span><h2>亲!您还没有购物!请先去购物!</h2></span>
				</div>
			</div>
		</c:otherwise>
	</c:choose>
	<div class="container footer">
		<div class="span24">
			
		</div>
		<div class="span24">
			<ul class="bottomNav">
				<li><hr></hr></li>
			</ul>
		</div>
		<div class="span24">
			<div class="copyright">Copyright © 网上商城 版权所有</div>
		</div>
	</div>
</body>
</html>